<template>
  <div class="container">
   <vue-preview :slides="slide1" @close="handleClose" class="my-box"></vue-preview>
  </div>
</template>
<script>
export default {
    data:function (){
        return {
            slide1 :[
                {
                src: 'https://ww1.sinaimg.cn/large/610dc034jw1faaywuvd20j20u011gdli.jpg',
                msrc: 'https://ww1.sinaimg.cn/large/610dc034jw1faaywuvd20j20u011gdli.jpg',
                alt: 'picture1',
                title: 'Image Caption 1',
                w: 600,
                h: 700
                },
                {
                src: 'https://ww2.sinaimg.cn/large/610dc034gw1f9zjk8iaz2j20u011hgsc.jpg',
                msrc: 'https://ww2.sinaimg.cn/large/610dc034gw1f9zjk8iaz2j20u011hgsc.jpg',
                alt: 'picture1',
                title: 'Image Caption 1',
                w: 600,
                h: 600
                },
                {
                src: 'https://ww1.sinaimg.cn/large/610dc034jw1faj6sozkluj20u00nt75p.jpg',
                msrc: 'https://ww1.sinaimg.cn/large/610dc034jw1faj6sozkluj20u00nt75p.jpg',
                alt: 'picture1',
                title: 'Image Caption 1',
                w: 600,
                h: 800
                },
                {
                src: 'https://ww4.sinaimg.cn/large/610dc034gw1fac4t2zhwsj20sg0izahf.jpg',
                msrc: 'https://ww4.sinaimg.cn/large/610dc034gw1fac4t2zhwsj20sg0izahf.jpg',
                alt: 'picture1',
                title: 'Image Caption 1',
                w: 600,
                h: 400
                },
                {
                src: 'https://ww4.sinaimg.cn/large/610dc034gw1fafmi73pomj20u00u0abr.jpg',
                msrc: 'https://ww4.sinaimg.cn/large/610dc034gw1fafmi73pomj20u00u0abr.jpg',
                alt: 'picture1',
                title: 'Image Caption 1',
                w: 600,
                h: 700
                },
                {
                src: 'https://ww4.sinaimg.cn/large/610dc034jw1fagrnmiqm1j20u011hanr.jpg',
                msrc: 'https://ww4.sinaimg.cn/large/610dc034jw1fagrnmiqm1j20u011hanr.jpg',
                alt: 'picture1',
                title: 'Image Caption 1',
                w: 600,
                h: 800
                }
                
            ]
        }
    },
    methods: {
      handleClose () {
        console.log('close event')
      }
    }
}

</script>
<style lang="scss" scoped>
.container {
    display: flex;
    .my-box {
        // display: flex;
        width: 300;


    }
}
</style>